
import React from 'react';
import { Card, Form, Input, Typography } from "antd";
import { useElement } from "tools/hooks/useElement";
import { useProperty } from 'tools/hooks/useProperty';

const { Text } = Typography;

/** 基础面板 */
export default function BaseCard() {

    const { element } = useElement();

    const { setProperty } = useProperty(element)

    if (!element) return <></>;
    return (
        <Card title="基础">
            <Form
                layout="horizontal"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
            >
                <Form.Item label='UUID'>
                    <Text ellipsis={{ tooltip: element.uuid }} >{element.uuid}</Text>
                </Form.Item>

                <Form.Item label='名称' >
                    <MyInput
                        value={element.name}
                        onChange={setProperty('name')}
                    />
                </Form.Item>
            </Form>
        </Card>
    )
}

function MyInput(props: { value?: string, onChange: (e?: string) => void }) {

    const [value, setValue] = React.useState(props.value);

    const onChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        setValue(e.target.value);
    }, [])

    const onBlur = React.useCallback(() => {
        props.onChange && props.onChange(value)
    }, [props, value])

    React.useEffect(() => {
        setValue(props.value)
    }, [props.value])

    return (
        <Input
            bordered={false}
            size="small"
            value={value}
            onChange={onChange}
            onBlur={onBlur}
        />
    )
}